{% extends 'base.html' %}

{% block title %}申请请假 - 请假审批系统{% endblock %}

{% block content %}
<div class="card">
    <div class="card-header">
        <h2>申请请假</h2>
    </div>
    
    <form method="post" enctype="multipart/form-data">
        {% csrf_token %}
        
        {% if form.errors %}
        <div class="alert alert-danger">
            <strong>请修正以下错误：</strong>
            <ul style="margin: 0.5rem 0 0 1rem;">
                {% for field, errors in form.errors.items %}
                    {% for error in errors %}
                        <li>{{ error }}</li>
                    {% endfor %}
                {% endfor %}
            </ul>
        </div>
        {% endif %}
        
        <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 2rem;">
            <div>
                <div class="form-group">
                    <label for="{{ form.leave_type.id_for_label }}">请假类型 *</label>
                    {{ form.leave_type }}
                </div>
                
                <div class="form-group">
                    <label for="{{ form.start_date.id_for_label }}">开始日期 *</label>
                    {{ form.start_date }}
                </div>
                
                <div class="form-group">
                    <label for="{{ form.end_date.id_for_label }}">结束日期 *</label>
                    {{ form.end_date }}
                </div>
                
                <div class="form-group">
                    <label for="{{ form.attachment.id_for_label }}">附件</label>
                    {{ form.attachment }}
                    <small style="color: #666;">如需要，请上传相关证明文件</small>
                </div>
            </div>
            
            <div>
                <div class="form-group">
                    <label for="{{ form.reason.id_for_label }}">请假原因 *</label>
                    {{ form.reason }}
                </div>
                
                <div class="form-group">
                    <label for="{{ form.emergency_contact.id_for_label }}">紧急联系人</label>
                    {{ form.emergency_contact }}
                </div>
                
                <div class="form-group">
                    <label for="{{ form.emergency_phone.id_for_label }}">紧急联系电话</label>
                    {{ form.emergency_phone }}
                </div>
                
                <div class="form-group">
                    <label for="{{ form.work_handover.id_for_label }}">工作交接安排</label>
                    {{ form.work_handover }}
                </div>
            </div>
        </div>
        
        <div style="border-top: 1px solid #eee; padding-top: 1.5rem; margin-top: 1.5rem;">
            <div style="display: flex; gap: 1rem; justify-content: flex-end;">
                <a href="{% url 'dashboard' %}" class="btn btn-secondary">取消</a>
                <button type="submit" name="action" value="save_draft" class="btn btn-secondary">保存草稿</button>
                <button type="submit" name="action" value="submit" class="btn btn-primary">提交申请</button>
            </div>
        </div>
    </form>
</div>

<div class="card">
    <div class="card-header">
        <h2>请假余额</h2>
    </div>
    
    <div class="stats-grid">
        {% for balance in leave_balances %}
        <div class="stat-card">
            <div class="stat-number">{{ balance.remaining_days }}</div>
            <div class="stat-label">{{ balance.leave_type.name }}剩余天数</div>
            <small style="color: #666;">总计：{{ balance.total_days }}天，已用：{{ balance.used_days }}天</small>
        </div>
        {% endfor %}
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const startDateInput = document.getElementById('{{ form.start_date.id_for_label }}');
    const endDateInput = document.getElementById('{{ form.end_date.id_for_label }}');
    
    function calculateDays() {
        if (startDateInput.value && endDateInput.value) {
            const startDate = new Date(startDateInput.value);
            const endDate = new Date(endDateInput.value);
            
            if (startDate <= endDate) {
                let days = 0;
                let currentDate = new Date(startDate);
                
                while (currentDate <= endDate) {
                    // 排除周末 (0=Sunday, 6=Saturday)
                    if (currentDate.getDay() !== 0 && currentDate.getDay() !== 6) {
                        days++;
                    }
                    currentDate.setDate(currentDate.getDate() + 1);
                }
                
                // 显示计算的天数
                let daysInfo = document.getElementById('days-info');
                if (!daysInfo) {
                    daysInfo = document.createElement('div');
                    daysInfo.id = 'days-info';
                    daysInfo.style.cssText = 'margin-top: 0.5rem; padding: 0.5rem; background: #e3f2fd; border-radius: 5px; color: #1976d2;';
                    endDateInput.parentNode.appendChild(daysInfo);
                }
                daysInfo.textContent = `预计请假工作日：${days}天`;
            }
        }
    }
    
    startDateInput.addEventListener('change', calculateDays);
    endDateInput.addEventListener('change', calculateDays);
});
</script>
{% endblock %}
